{% extends '__base__.html' %}
{% load staticfiles %}

{% block content %}

    <!-- 每30s刷新一次页面 -->
    <meta http-equiv="refresh" content="30">

    {#        表格有数据时展示#}
    <div class="app-title">
        {#            页面简介区域#}
        <div>
            <h1><i class="fa fa-th-list"></i> Jenkins Job列表</h1>
            {% if jenkins_list %}
                <p> Jenkins Job列表</p>
            {% else %}
                <p>No jenkins job are available.</p>
            {% endif %}
        </div>
        {#            面包屑区域#}
        <ul class="app-breadcrumb breadcrumb side">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">发布管理</li>
            <li class="breadcrumb-item active"><a href="#">Jenkins任务管理</a></li>
        </ul>
    </div>
    {#        操作结果提示栏区域#}
    <div class="row">
        <div class="col-lg-12">
            <div class="bs-component">
                <div class="alert alert-dismissible" id="notice" style="display: none;">
                    <button class="close" type="button" data-dismiss="alert">×</button>
                    <h4></h4>
                    <p><a class="alert-link" href="#"></a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    {#        按钮区域#}
    <div>
        <button class="btn btn-success" type="button" onclick="sync_jenkins_jobs()">同步任务列表
        </button>
    </div>
    {% if jenkins_list %}
        {#        表格区域#}
        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    {#                    表格数据区域#}
                    <div class="tile-body table-responsive" id="table">
                        <table class="table table-hover table-bordered" id="sampleTable"
                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                            <thead>
                            <tr>
                                <th>最后一次构建结果</th>
                                <th>Job名称</th>
                                <th>最后一次成功时间</th>
                                <th>最后一次失败时间</th>
                                <th>操作</th>
                                <th>历史记录</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for job in jenkins_list %}
                                <tr>
                                    <td>
                                        {% if job.get_last_build_result == '成功' %}
                                            <span class="text-success"
                                                  id="result-{{ job.id }}">{{ job.get_last_build_result }}</span>
                                        {% else %}<span class="text-danger"
                                                        id="result-{{ job.id }}">{{ job.get_last_build_result }}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ job.name }}</td>
                                    <td><span
                                            id="last_success_time-{{ job.id }}">{{ job.get_last_success_build_time }}</span>
                                    </td>
                                    <td><span
                                            id="last_failure_time-{{ job.id }}">{{ job.get_last_failure_build_time }}</span>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-primary" type="button" id="build-{{ job.id }}"
                                                style="display: {% if job.status == 2 %}block{% else %}none{% endif %};"
                                                onclick="build({{ job.id }})">
                                            Build
                                        </button>
                                        <div class="bs-component" id="process-{{ job.id }}"
                                             style="display: {% if job.status == 2 %}none{% else %}block{% endif %};">
                                            <div class="progress mb-1">
                                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-info"
                                                     role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                                     aria-valuemax="100" style="width: 100%"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <a class="btn btn-sm btn-danger" type="button" id="history-{{ job.id }}" href="{% url 'jenkins:job_history' job.id %}">
                                            History
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-body">请先同步任务列表</div>
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}

{% block custom_static %}

    <!-- Data table plugin-->
    <script type="text/javascript" src="{% static 'js/plugins/jquery.dataTables.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/dataTables.bootstrap.min.js' %}"></script>
    <script type="text/javascript">$('#sampleTable').DataTable();</script>

    <!--build-->
    <script type="text/javascript">
        function build(job_id) {
            $('#build-' + job_id).css('display', 'none');
            $('#process-' + job_id).css('display', 'block');
            $.ajax({
                type: "POST",
                url: "/jenkins/build/" + job_id + "/",
                data: '',
                contentType: "application/json; charset=utf-8",
                async: true,
                timeout: 40000,
                success: function (data) {
                    if (data['data']) {
                    }
                    else {
                        $("#process-" + job_id).css('display', 'none');
                        $("#build-" + job_id).css('display', 'block');
                        alert(data['msg']);
                    }
                },
                error: function (data, xhr, status, error) {
                }
            });
        }
    </script>

    <!-- websocket -->
    <script>
        function init_ws() {
            socket = new WebSocket("ws://" + window.location.host + "/ws/jenkins/");
            socket.onmessage = function (e) {
                var data = $.parseJSON(e.data);
                var job_id = data['job_id'];
                var last_success_time = data['last_success_time'];
                var last_failure_time = data['last_failure_time'];
                if (data['result'] == 'SUCCESS') {
                    $("#process-" + job_id).css('display', 'none');
                    $("#build-" + job_id).css('display', 'block');
                    $("#result-" + job_id).text('成功');
                    $("#result-" + job_id).attr('class', 'text-success');
                    $("#last_success_time-" + job_id).text(last_success_time);
                }
                if (data['result'] == 'FAILURE') {
                    $("#process-" + job_id).css('display', 'none');
                    $("#build-" + job_id).css('display', 'block');
                    $("#result-" + job_id).text('失败');
                    $("#result-" + job_id).attr('class', 'text-danger');
                    $("#last_failure_time-" + job_id).text(last_failure_time);
                }
            };
            socket.onopen = function () {
                socket.send("start ws connection");
            };
            if (socket.readyState == WebSocket.OPEN) socket.onopen();
        }

        $(document).ready(function () {
            init_ws()
        })
    </script>
    
    <!-- 同步jenkins任务列表-->
    <script>
        function sync_jenkins_jobs() {
            //jQuery('#loading').showLoading();
            $.ajax({
                type: "POST",
                url: "/jenkins/sync_jenkins_jobs/",
                data: '',
                contentType: "application/json; charset=utf-8",
                async: true,
                success: function (data) {
                    if (data['success']) {
                        location.reload();
                    }
                    else {
                        jQuery('#loading').hideLoading();
                        alert(data['msg']);
                    }
                },
                error: function (data, xhr, status, error) {
                    jQuery('#loading').hideLoading();
                    alert(data['msg']);
                }
            });
        }
    </script>

{% endblock %}